<template>
	<view class="box-bg">
		<!-- right-icon="search" @clickRight="" -->
			 <uni-nav-bar height="65px" left-icon="left" @clickLeft='handleBack' 
				:right-icon="showRightIcon?'search':''" @clickRight="handleSearch" color="#ffffff"
			   backgroundColor="#7CAFE7">
			 	<!-- 自定义左侧内容 -->
			 	<view slot="left" class="box-title">
					<!-- <view @click="back" class="box-title-icon"><u-icon name="arrow-left" color="#fff"></u-icon></view> -->
			 		<text>{{ title }}</text>
			 	</view>
			 </uni-nav-bar>
	</view>
</template>

<script>
	export default {
		name: 'NavBar',
		// emits:['leftClick'],
		props: {
			title: {
				type: String,
				required: true,
				default: ''
			},
			showRightIcon:{
				type:Boolean,
				default:true
			}
		},
		methods:{
			handleBack(){
				let canNavBack = getCurrentPages()
				if( canNavBack && canNavBack.length>1) {  
					uni.navigateBack() 
				} else {  
					history.back();  
				} 
			},
			handleSearch(){
				
			}
		}
	}
</script>

<style>
	.box-bg {
		position: relative;
	
		.box-title {
			position: absolute;
			left: 40px;
			bottom: 20px;
			color: #FFFFFF;
			font-size: 16px;
			font-weight: 600;
			display: flex;
			flex-direction: row;
		}
	}
</style>